<html>
  <head>
    <title>何为媒体查询</title>
  </head>
  <body>
    <script>
      /*
            一、什么是媒体查询

                        媒体查询（Media Queries） 是 CSS3 中引入的一项重要技术，它允许开发者根据设备的特性（如屏幕宽度、高度、分辨率、设备类型等）来应用不同的 CSS 样式。

                        简单来说，它就像一个 “条件判断工具”，能让网页根据浏览设备的差异自动调整布局和样式，实现 “一份代码适配多种设备” 的效果
      */

      /*
            二、媒体查询的核心语法
            
                      媒体查询的基本结构由 "媒体类型"  和 "媒体特性" 两个部分组成，语法如下：

                                  @media  [媒体类型]   and  (媒体特性){

                                    -- 满足条件时应用的CSS样式 --

                                  }

                            ★、媒体类型：   指定设备类型，常见的有 screen (屏幕设备)、print(打印设备)、all(所有设备，默认值)等。


                            ★、媒体特性：   用括号包裹的条件，如屏幕宽度 (max-width/min-width)、分辨率(reslolution)、方向（orientation: portrait/landscape，即竖屏 / 横屏）等
      */

      /*
            三、配体查询的作用

                        媒体查询是实现响应式网页设计（Responsive Web Design） 的核心工具，主要作用包括：


                        1、适配不同尺寸屏幕

                                  不同设备的屏幕宽度差异很大（如手机 320px、平板 768px、电脑 1200px），媒体查询可以针对不同宽度设置样式，避免网页在手机上显示过大或在电脑上显示过窄。

                                示例： 当屏幕宽度小于 768px 时，导航栏从横向排列改为纵向排列。

                        2、优化设备特性

                                  针对设备的特殊特性调整样式，例如：

                                     ①、检测设备方向（竖屏 / 横屏），调整内容布局；

                                     ②、检测打印设备，隐藏网页中的广告、导航等非必要内容，只显示核心文本；

                                     ③、检测高分辨率屏幕（如 Retina 屏），使用高清图片

                        3、提升用户体验

                                  通过动态适配不同设备，让用户在任何场景下都能获得舒适的浏览体验。
                                  
                                  例如，在手机上增大按钮点击区域，避免误触；在小屏幕上简化内容，突出重点。
      */


      /*
            四、实际应用示例

                          假设我们希望实现：屏幕宽度大于 1200px 时，内容区域显示 3 列；768px-1200px 时显示 2 列；小于 768px 时显示 1 列。代码如下：

                                    ---默认样式（适用于小屏幕）---
                                      .content {
                                        column-count: 1;
                                      }

                                    ---中等屏幕（768px及以上）---
                                      @media screen and (min-width: 768px) {
                                        .content {
                                          column-count: 2;
                                        }
                                      }


                                    ----大屏幕（1200px及以上）----
                                      @media screen and (min-width: 1200px) {
                                          .content {
                                            column-count: 3;
                                          }
                                        }
      */

      /*
            五、总结

                    媒体查询通过 “条件判断 + 样式适配” 的方式，让网页能够智能响应不同设备的特性，是现代网页设计中实现跨设备兼容的关键技术。
                    
                    它不仅简化了开发流程（无需为不同设备单独开发多个版本），还能显著提升用户在各种设备上的浏览体验。  
      */
    </script>
  </body>
</html>